@mixin infoStyle($color, $size, $lineHeight) {
  line-height: $lineHeight;
  &-label {
    display: inline-block;
    margin-right: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: $size;
    color: #4E5B71;
    vertical-align: bottom;
    &.normal-width { width: 100px; }
    &.lg-width { width: 150px; }
  }
  &-field {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: $size;
    color: $color;
    vertical-align: bottom;
    &.normal-width { width: calc(100% - 112px); }
    &.lg-width { width: calc(100% - 162px); }
  }
}
.info {
  width: 100%;
  position: relative;
  &-operate {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 28px;
  }
  &-title {
    font-size: 14px;
    color: #1E2126;
    line-height: 20px;
    margin-bottom: 12px;
  }
  &-row {
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  &-item {
    @include infoStyle(#1E2126, 14px, 20px)
  }
}

.info-paragraph {
  width: 100%;
  position: relative;
  background-color: $background;
  border: 1px solid #EBF0F5;
  padding: 8px 12px;
  &-operate {
    position: absolute;
    right: 12px;
    top: 8px;
    line-height: 28px;
  }
  &-title {
    font-size: 14px;
    color: #1E2126;
    line-height: 20px;
    margin-bottom: 4px;
  }
  &-row {
    font-size: 12px;
    color: #4E5B71;
    margin-bottom: 4px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  &-item {
    @include infoStyle(#4E5B71, 12px, 16px)
  }
}
